<template>
  <div class="column-rearrange">
    <p class="label">移动至特定字段</p>
    <a-radio-group
      v-model="rearrangePositon"
      name="rearrangeOptions"
      style="margin-left: 10px;"
      @change="onChange"
    >
      <a-radio value="before">之前</a-radio>
      <a-radio value="after">之后</a-radio>
    </a-radio-group>
    <p class="label">字段名</p>
    <a-select
      v-model="targetCol"
      size="small"
      style="margin-left: 10px; width: 90%;"
      @change="onChange"
    >
      <a-select-option
        v-for="column in columnList"
        :key="column.name"
        :value="column.name"
        >{{ column.name }}
      </a-select-option>
    </a-select>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { IColumn } from '@/store/modules/dataview'
import { StatisticsAction } from '@/util/data-selection-actions'

@Component
export default class ColumnRearrange extends Vue {
  @Prop() column!: IColumn
  @Prop() columnList!: IColumn[]

  private rearrangePositon = 'before'
  private targetCol = this.columnList[0].name // 目标字段
  private params = {
    data: {
      action: 'REARRANGE',
      col: this.column.name,
      actionType: StatisticsAction.columnRearrange,
      description: `移动字段至${this.targetCol}前一位`,
      targetCol: this.columnList[0].name,
      direction: -1,
    },
  }

  mounted() {
    this.$emit('on-filter-params-change', this.params)
  }

  /**
   * 位置、字段改变
   */
  private onChange() {
    this.params.data = {
      ...this.params.data,
      targetCol: this.targetCol,
      direction: this.rearrangePositon === 'before' ? -1 : 1,
      description: `移动字段至${this.targetCol}${
        this.rearrangePositon === 'before' ? '前' : '后'
      }一位`,
    }
    this.$emit('on-filter-params-change', this.params)
  }
}
</script>

<style lang="less" scoped>
.column-rearrange {
  .label {
    line-height: 24px;
    margin: 10px 0 8px;
  }
}
</style>
